<template>
  <q-layout-header class="no-shadow">
    <q-toolbar color="primary">

      <q-btn flat dense round v-if="ui.pageBackBtn"
        @click="ui.pageBackBtn">
        <q-icon name="mdi-chevron-left" />
      </q-btn>

      <q-toolbar-title :class="$q.platform.is.mobile?'text-center':'text-left'">
        {{ ui.pageTitle }}
        <div slot="subtitle" v-if="ui.pageSubTitle">
          {{ ui.pageSubTitle }}
        </div>
      </q-toolbar-title>

      <q-btn flat dense round
        @click="ui.drawer.open = !ui.drawer.open">
        <q-icon name="mdi-menu" />
      </q-btn>
    </q-toolbar>
  </q-layout-header>
</template>

<script>

export default {
  name: 'MyHeader',
  data () {
    return {
      ui: this.$api.ui
    }
  }
}
</script>